<template>
  <div class="main_right_recommend">
    <div class="main_right_recommend_title">
      <div class="main_right_recommend_title_1">
        您愿意向朋友推荐"五次方"吗？
      </div>
      <div class="main_right_recommend_content">
        <div class="main_right_recommend_content_img">
          <div class="main_right_recommend_content_img_hover" v-for="(item,index) in image" :key="index">
            <div @click="addClass(index,item.content)" :class="{'isActive':isActive===index}">
              <img :src="item.img" class="main_right_recommend_content_img_item" alt="图片">
              <div class="main_right_recommend_content_img_item_2">{{ item.content }}</div>
            </div>
          </div>
        </div>
        <div v-if="isSubmit===false" class="main_right_recommend_content_publish">
          <a-input v-model:value="recommend.content" placeholder="请输入建议或反馈后点击提交"/>
          <a-button @click="handleSaveRecommend" type="primary">提交</a-button>
        </div>
        <div v-else class="main_right_recommend_content_publish">
          <a-button type="primary" ghost>已提交</a-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import {ref} from "vue";
// @ts-ignore
import cookie from 'js-cookie'
import {Recommend} from "@/model/home/tease";
import {queryRecommendByUserId, saveRecommend} from "@/api/home/tease";
import {message} from "ant-design-vue";

//是否激活
const isActive = ref(-1)

//用户是否已经提交建议
const isSubmit = ref<boolean>(false)

//导航条动态样式
const addClass = (index: number, content: string) => {
  isActive.value = index
  recommend.value.type = content
}

const image = [
  {
    content: "不推荐",
    img: new URL('@/assets/img/tease/reject.png', import.meta.url).href
  },
  {
    content: "一般",
    img: new URL('@/assets/img/tease/general.png', import.meta.url).href
  },
  {
    content: "推荐",
    img: new URL('@/assets/img/tease/recommend.png', import.meta.url).href
  },
]

//用户发表建议需要的参数
const recommend = ref<Recommend>({
  userId: 0,
  type: '',
  content: ''
})

//查询当前用户是否已经提交建议
const handleRecommendByUserId = () => {
  if (recommend.value.userId != 0) {
    queryRecommendByUserId(recommend.value.userId).then((res) => {
      if (res.data.data.recommend != null) {
        isSubmit.value = true
      }
    })
  }
}

//保存用户的建议
const handleSaveRecommend = async () => {
  if (recommend.value.userId === 0) {
    message.warn("未登录,无法发表建议！")
  } else if (recommend.value.type == '') {
    message.warn("请选择类型")
  } else if (recommend.value.content == '') {
    message.warn("内容不能为空")
  } else {
    const res = await saveRecommend(recommend.value)
    isSubmit.value = true
    recommend.value.type = ''
    recommend.value.content = ''
    message.success(res.data.message)
  }
}

//获取用户id
const getUserId = () => {
  if (cookie.get('userinfo') != null) {
    recommend.value.userId = JSON.parse(cookie.get('userinfo')).id
  } else {
    recommend.value.userId = 0
  }
}

getUserId()
handleRecommendByUserId()
</script>

<style lang="less" scoped>
.main_right_recommend {
  margin-top: 50px;
  background-color: #ffffff;
  padding: 3px;

  .main_right_recommend_title {
    box-shadow: rgba(3, 102, 214, 0.3) 0 0 0 3px;
    padding: 10px;
    font-weight: bold;

    .main_right_recommend_title_1 {
      text-align: center;
      font-size: 20px;
      border-bottom: 1px solid #f0f0f0;
    }

    .main_right_recommend_content {
      text-align: center;
      padding: 30px;

      .main_right_recommend_content_img {
        display: flex;
        justify-content: center;

        .main_right_recommend_content_img_hover {
          width: 70px;

          .isActive {
            background-color: #CDDCDC;
          }

          .main_right_recommend_content_img_item {
            width: 50px;
            height: 50px;
          }

        }
      }

      .main_right_recommend_content_img_hover:hover {
        cursor: pointer;
        background-color: #cccccc;
      }

      .main_right_recommend_content_publish {
        display: flex;
        margin-top: 10px;
        justify-content: center;
      }
    }
  }
}
</style>